<div class="da-list-wrap">
  <da-layout-row [daGutter]="[24, 24]">
    <da-col-item [daSpan]="24" [daXs]="24">
      <div class="da-list-container">
        <div class="da-list-header">
          <div class="da-common-search">
            <div class="da-left">
              <d-search
                [size]="'sm'"
                (searchFn)="getList()"
                [(ngModel)]="searchForm.keyword"
                class="da-inline"
                [placeholder]="'Search width First Name'"
              ></d-search>
            </div>
            <div class="da-right">
              <d-button
                (click)="batchDelete()"
                [disabled]="!deleteList.length"
                style="margin-left: 12px"
                >Batch Delete</d-button
              >
            </div>
          </div>
        </div>
        <div class="da-list-content" dLoading [loading]="busy">
          <d-data-table
            [fixHeader]="true"
            [dataSource]="basicDataSource"
            [tableWidthConfig]="tableWidthConfig"
            [scrollable]="true"
            [lazy]="true"
            [fixHeader]="true"
            [maxHeight]="'600px'"
            (checkAllChange)="onCheckAllChange()"
            (loadMore)="loadMore()"
          >
            <thead dTableHead [checkable]="true">
              <tr dTableRow>
                <th
                  dHeadCell
                  *ngFor="let colOption of dataTableOptions.columns"
                  [resizeEnabled]="true"
                  (resizeEndEvent)="onResize($event, 'title')"
                  [filterable]="colOption.filterable"
                  [closeFilterWhenScroll]="true"
                  [filterList]="colOption.filterList"
                  (filterChange)="onFirstFilterChange($event, colOption)"
                  [extraFilterTemplate]="extraFilterTemplate"
                >
                  {{ colOption.header }}
                </th>
                <th dHeadCell>Actions</th>
              </tr>
            </thead>
            <tbody dTableBody>
              <ng-template
                let-rowItem="rowItem"
                let-rowIndex="rowIndex"
                let-nestedIndex="nestedIndex"
              >
                <tr
                  dTableRow
                  [ngClass]="{ 'da-table-row-selected': rowItem.$checked }"
                >
                  <td dTableCell class="devui-checkable-cell">
                    <d-checkbox
                      [ngModelOptions]="{ standalone: true }"
                      (ngModelChange)="
                        onRowCheckChange($event, rowIndex, nestedIndex, rowItem)
                      "
                      [ngModel]="rowItem.$checked"
                      [halfchecked]="rowItem.$halfChecked"
                      [disabled]="rowItem.$checkDisabled"
                      dTooltip
                      [content]="rowItem.$checkBoxTips"
                      [position]="['top', 'right', 'bottom', 'left']"
                      [showAnimation]="false"
                    >
                    </d-checkbox>
                  </td>
                  <td
                    dTableCell
                    [editable]="true"
                    [editableTip]="editableTip"
                    [(editing)]="rowItem['idEdit']"
                    [rowItem]="rowItem"
                    [field]="'id'"
                    [beforeEditStart]="beforeEditStart"
                    [beforeEditEnd]="beforeEditEnd"
                  >
                    <span *ngIf="!rowItem['idEdit']">{{ rowItem?.id }}</span>
                    <div *ngIf="rowItem['idEdit']" class="edit-padding-fix">
                      <input
                        class="devui-form-control"
                        name="id"
                        [(ngModel)]="rowItem.id"
                        [attr.maxlength]="100"
                        [attr.minlength]="3"
                      />
                    </div>
                  </td>
                  <td
                    dTableCell
                    [editable]="true"
                    [editableTip]="editableTip"
                    [(editing)]="rowItem['titleEdit']"
                    [rowItem]="rowItem"
                    [field]="'title'"
                    [beforeEditStart]="beforeEditStart"
                    [beforeEditEnd]="beforeEditEnd"
                  >
                    <span *ngIf="!rowItem['titleEdit']"
                      ><d-tag [tag]="'Epic'" [labelStyle]="'epic'"></d-tag>
                      {{ rowItem?.title }}</span
                    >
                    <div *ngIf="rowItem['titleEdit']" class="edit-padding-fix">
                      <input
                        class="devui-form-control"
                        name="title"
                        [(ngModel)]="rowItem.title"
                        [attr.maxlength]="100"
                        [attr.minlength]="3"
                      />
                    </div>
                  </td>
                  <td
                    dTableCell
                    [editable]="true"
                    [editableTip]="editableTip"
                    [(editing)]="rowItem['priorityEdit']"
                    [rowItem]="rowItem"
                    [field]="'priority'"
                    [beforeEditStart]="beforeEditStart"
                    [beforeEditEnd]="beforeEditEnd"
                  >
                    <span *ngIf="!rowItem['priorityEdit']"
                      ><d-tag
                        [tag]="rowItem?.priority"
                        [labelStyle]="rowItem?.priority"
                      ></d-tag
                    ></span>
                    <div
                      *ngIf="rowItem['priorityEdit']"
                      class="edit-padding-fix"
                    >
                      <d-select
                        name="priority"
                        [(ngModel)]="rowItem.priority"
                        [options]="priorities"
                      ></d-select>
                    </div>
                  </td>
                  <td
                    dTableCell
                    [editable]="true"
                    [editableTip]="editableTip"
                    [(editing)]="rowItem['iterationEdit']"
                    [rowItem]="rowItem"
                    [field]="'iteration'"
                    [beforeEditStart]="beforeEditStart"
                    [beforeEditEnd]="beforeEditEnd"
                  >
                    <span *ngIf="!rowItem['iterationEdit']">{{
                      rowItem?.iteration
                    }}</span>
                    <div
                      *ngIf="rowItem['iterationEdit']"
                      class="edit-padding-fix"
                    >
                      <input
                        dTextInput
                        size="sm"
                        [(ngModel)]="rowItem.iteration"
                      />
                    </div>
                  </td>
                  <td
                    dTableCell
                    [editable]="true"
                    [editableTip]="editableTip"
                    [(editing)]="rowItem['assigneeEdit']"
                    [rowItem]="rowItem"
                    [field]="'assignee'"
                    [beforeEditStart]="beforeEditStart"
                    [beforeEditEnd]="beforeEditEnd"
                  >
                    <span *ngIf="!rowItem['assigneeEdit']">
                      <d-avatar
                        [name]="rowItem.assignee"
                        [width]="24"
                        [height]="24"
                      ></d-avatar>
                      <span style="margin-left: 6px">{{
                        rowItem.assignee
                      }}</span>
                    </span>
                    <div
                      *ngIf="rowItem['assigneeEdit']"
                      class="edit-padding-fix"
                    >
                      <input
                        dTextInput
                        size="sm"
                        [(ngModel)]="rowItem.assignee"
                      />
                    </div>
                  </td>
                  <td
                    dTableCell
                    [editable]="true"
                    [editableTip]="editableTip"
                    [(editing)]="rowItem['statusEdit']"
                    [rowItem]="rowItem"
                    [field]="'status'"
                    [beforeEditStart]="beforeEditStart"
                    [beforeEditEnd]="beforeEditEnd"
                  >
                    <span *ngIf="!rowItem['statusEdit']"
                      ><span [ngClass]="rowItem?.status.split(' ')[0]">{{
                        rowItem?.status || "--"
                      }}</span></span
                    >
                    <div *ngIf="rowItem['statusEdit']" class="edit-padding-fix">
                      <d-select
                        name="status"
                        [(ngModel)]="rowItem.status"
                        [options]="['Stuck', 'Done', 'Working on it']"
                      ></d-select>
                    </div>
                  </td>
                  <td
                    dTableCell
                    [editable]="true"
                    [(editing)]="rowItem['dateEdit']"
                  >
                    <span *ngIf="!rowItem['dateEdit']">{{
                      rowItem?.timeline | i18nDate: "short":false
                    }}</span>
                    <form
                      *ngIf="rowItem['dateEdit']"
                      class="form-inline edit-padding-fix"
                    >
                      <div class="devui-form-group">
                        <div class="devui-input-group devui-dropdown-origin">
                          <input
                            class="devui-form-control search"
                            name="date"
                            [(ngModel)]="rowItem.timeline"
                            dDatepicker
                            appendToBody
                            #datePicker="datepicker"
                            [autoOpen]="true"
                            (ngModelChange)="onEditEnd(rowItem, 'dateEdit')"
                          />
                          <div
                            class="devui-input-group-addon"
                            (click)="datePicker.toggle()"
                          >
                            <i class="icon icon-calendar"></i>
                          </div>
                        </div>
                      </div>
                    </form>
                  </td>
                  <td>
                    <d-button
                      icon="icon-delete"
                      bsStyle="text-dark"
                      title="delete"
                      (click)="deleteRow(rowIndex)"
                    ></d-button>
                  </td>
                </tr>
              </ng-template>
            </tbody>
          </d-data-table>
        </div>
      </div>
    </da-col-item>
  </da-layout-row>
</div>

<ng-template
  #extraFilterTemplate
  let-checked="checked"
  let-halfChecked="halfChecked"
>
  <span>{{
    checked ? "All selected" : halfChecked ? "Some selected" : " None selected"
  }}</span>
</ng-template>
